<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted(){
    this.init()
  },
  methods: {
    init() {
      let Cesium = this.cesium
      let viewer = new Cesium.Viewer('cesiumContainer');
      var redBox = viewer.entities.add({
        name : '杭州上方三千米的蓝色半透明的盒子',
        position: Cesium.Cartesian3.fromDegrees(120.15, 30.28, 3000.0),
        box : {
          dimensions : new Cesium.Cartesian3(4000.0, 3000.0, 5000.0),
          material : Cesium.Color.BLUE.withAlpha(0.5),
          outline : true,
          outlineColor : Cesium.Color.BLACK
        }
      });

      viewer.zoomTo(viewer.entities);

      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
    }
  }
};
</script>

<style lang='scss' scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
